<template>
    <div>
        <div class="echart-h" id="qualityControl"></div>
        <div class="mb-15">
            <el-button
                data-btn
                size="mini"
                @click="
                    () => {
                        this.tableDataType = 'init';
                        this.echartCode = null;
                        childEchart(true, null);
                    }
                "
                >重置</el-button
            >
            <el-button
                data-btn
                size="mini"
                :loading="downloading"
                @click="downLoad"
                >下载</el-button
            >
        </div>
        <div class="echart-h" id="qcChild"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapState } from 'vuex';
import { getStandardManagement, getOrgStandardManagement } from '@/api/cockpit';
import { dataZoom, grid } from '@/config/common';
export default {
    name: 'QualityControl',
    data () {
        return {
            downloading: false,
            tableDataType: 'init',
            echartCode: null,
            deptArr: null,
            rectificationRangeId: null
        };
    },
    computed: {
        ...mapState({
            indexCode: state => state.cockpit.indexCode,
            code: state => state.cockpit.code,
            year: state => state.cockpit.year
        })
    },
    created () {},
    mounted () {
        this.initEchart();
    },
    methods: {
        initEchart () {
            const chartDom = document.getElementById('qualityControl');
            const myChart = echarts.init(chartDom);
            this.common.load(myChart);
            getStandardManagement({
                year: this.year,
                indexCode: this.indexCode,
                code: this.code
            }).then(res => {
                console.log(res, 'getStandardManagement');
                this.deptArr = res.angleNameList;
                const option = { ...this.common.barOption };
                option.title.text = '各层面编辑下发统计';
                option.tooltip.formatter = params => {
                    // console.log(params, 'tool');
                    // ${this.common.totalEle} 总数 ${Number(params[0].data) + Number(params[1].data)}个<br>
                    return this.common.formatVal(params, '条');
                };
                option.xAxis[0].data = res.names || [];
                option.xAxis[0].axisLabel = {
                    interval: 0,
                    formatter: (params) => {
                       return this.common.formatterAxisLabel(params)
                    }
                };
                option.xAxis[0].axisLabel.rotate = 0;
                option.yAxis[0].name = '单位/(条)';
                option.yAxis[0].axisLabel = {
                    formatter: '{value} 条'
                };
                const nameArr = ['已完成', '未完成'];
                const datas = res.values || [];
                option.legend.data = nameArr;
                option.series = [];
                for (let i = 0; i < nameArr.length; i++) {
                    option.series.push({
                        name: nameArr[i],
                        type: 'bar',
                        barWidth: '50px',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: datas[i]
                    });
                }
                // 1、清除画布
                myChart.clear();
                myChart.hideLoading();
                // 2、调用setOption
                option && myChart.setOption(option);
                this.childEchart(true, null);
            });
            // 3、在渲染点击事件之前先清除点击事件
            myChart.off('click');
            myChart.on('click', params => {
                this.tableDataType = 'echart';
                console.log(params);
                if (this.indexCode === 'cm') {
                    this.deptArr.map(item => {
                        if (item.angleName === params.name) {
                            this.rectificationRangeId =
                                item.rectificationRangeId;
                        }
                    });
                }
                let code;
                if (params.name === '学校层') {
                    code = 'XT_WH_XX';
                }
                if (params.name === '专业层') {
                    code = 'XT_WH_ZY';
                }
                if (params.name === '课程层') {
                    code = 'XT_WH_KC';
                }
                if (params.name === '教师层') {
                    code = 'XT_WH_JS';
                }
                if (params.name === '学生层') {
                    code = 'XT_WH_XS';
                }
                this.echartCode = code;
                this.childEchart(false, code);
            });
        },
        childEchart (paramType, codeVal) {
            const childDom = document.getElementById('qcChild');
            const childChart = echarts.init(childDom);
            this.common.load(childChart);
            const queryParams = {
                year: this.year,
                indexCode: this.indexCode,
                code: paramType ? this.code : codeVal,
                rectificationRangeId: ['cm'].includes(this.indexCode)
                    ? this.rectificationRangeId
                    : null
            };
            getOrgStandardManagement(queryParams).then(res => {
                // console.log(res, 'getOrgStandardManagement[[]]');
                const childOption = { ...this.common.barOption };
                childOption.dataZoom = dataZoom;
                const text = this.getText(this.echartCode ? this.echartCode : this.code)
                childOption.title.text = `${text}中各职能部门标准填写情况`;
                childOption.tooltip.formatter = params => {
                    // console.log(params, 'tool');
                    // ${this.common.totalEle} 总数 ${Number(params[0].data) + Number(params[1].data)}个<br>
                    return this.common.formatVal(params, '条');
                };
                childOption.xAxis[0].data = res.names || [];
                childOption.yAxis[0].name = '单位/(条)';
                childOption.yAxis[0].axisLabel = {
                    formatter: '{value} 条'
                };

                childOption.xAxis[0].axisLabel.rotate = res.names.length > 5 ? 30 : 0
                const nameArr = ['已完成', '未完成'];
                const datas = res.values || [];
                childOption.legend.data = nameArr;
                childOption.series = [];
                for (let i = 0; i < nameArr.length; i++) {
                    childOption.series.push({
                        name: nameArr[i],
                        type: 'bar',
                        barWidth: '50px',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside'
                            // color: '#000'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: datas[i]
                    });
                }
                childChart.hideLoading();
                childOption && childChart.setOption(childOption);
            });
        },
        getText (type) {
            switch (type) {
                    case 'XT_WH_XX':
                        return '学校层';
                    case 'XT_WH_ZY':
                        return '专业层';

                    case 'XT_WH_KC':
                        return '课程层';

                    case 'XT_WH_JS':
                        return '教师层';

                    case 'XT_WH_XS':
                        return '学生层';

                    default:
                        return '全体';
                }
        },
        downLoad () {
            this.downloading = true;
            this.$emit('qcControl', this.tableDataType, {
                indexName: ['init'].includes(this.tableDataType) ? this.code : this.echartCode,
                indexCode: this.indexCode,
                rectificationRangeId: ['echart'].includes(this.tableDataType) ? this.rectificationRangeId : null,
                year: this.year
            });
        }
    }
};
</script>
